<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%@include file="/WEB-INF/views/common/header.jsp" %>
</head>
<body>
<%@include file="/WEB-INF/views/common/top.jsp" %>
<%@include file="/WEB-INF/views/common/nav.jsp" %>
<c:set var="title" value="创建角色"/>
<c:if test="${role != null}">
    <c:set var="title" value="编辑角色"/>
</c:if>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <div class="show-top-grids">
        <div class="main-grids about-main-grids">
            <h4><c:out value="${title}"/></h4>
            <div class="recommended-info" pane="">
                <hr class="layui-bg-green">
                <form id="createRoleForm" class="layui-form layui-form-pane" style="margin-top: 1em;" method="post"
                      action='<c:url value="/role/create"/>'>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">角色名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="roleName" id="roleName" placeholder="角色名"
                                       value="${role.roleName}" autocomplete="off" class="layui-input"/>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">是否锁定</label>
                            <div class="layui-input-inline">
                                <select id="lock" name="lock" style="display: inline-block;" class="layui-input">
                                    <option
                                            <c:if test="${role.lock == false}">selected</c:if> value="0">正常
                                    </option>
                                    <option
                                            <c:if test="${role.lock == true}">selected</c:if> value="1">锁定
                                    </option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <input type="hidden" value="${role.id}" id="id" name="id"/>
                            <button class="layui-btn" type="submit" id="btn_create_master">保存</button>
                        </div>
                    </div>

                    <div id="divCheck" class="layui-form-item">
                        <label class="layui-form-label">权限配置</label>
                        <c:forEach var="func" items="${functions}" varStatus="status">
                            <div class="layui-col-xs12">
                                <div style="height: 50px;" class="layui-col-xs2">
                                    <input type="checkbox" name="functionIds" tag-index="${func.functionType}"
                                           lay-filter="func_type_${func.functionType}" value="${func.id}"
                                           lay-skin="primary"
                                           title="${func.functionName}">
                                </div>
                                <div class="layui-col-md9 layui-col-space1">
                                    <c:if test="${func.subFunctionInfoVo != null}">
                                        <c:forEach var="subFunc" items="${func.subFunctionInfoVo}"
                                                   varStatus="subStatus">
                                            <div class="layui-col-md12 layui-col-space1">
                                                <div style="height: 50px;" class="layui-col-md3 layui-col-space1">
                                                    <input type="checkbox" tag-index="${subFunc.functionType}"
                                                           name="functionIds" lay-skin="primary"
                                                           lay-submit="func_type_${subFunc.functionType}"
                                                           value="${subFunc.id}" title="${subFunc.functionName}">
                                                </div>

                                                <c:if test="${subFunc.subFunctionInfoVo != null}">
                                                    <div class="layui-col-md8">
                                                        <c:forEach var="finalFunc" items="${subFunc.subFunctionInfoVo}"
                                                                   varStatus="subStatus">
                                                            <div class="layui-col-md3" style="height: 50px;">
                                                                <input type="checkbox"
                                                                       tag-index="${finalFunc.functionType}"
                                                                       name="functionIds"
                                                                       lay-skin="primary" value="${finalFunc.id}"
                                                                       lay-submit="func_type_${finalFunc.functionType}"
                                                                       title="${finalFunc.functionName}">
                                                            </div>
                                                        </c:forEach>
                                                    </div>
                                                    <hr class="layui-bg-gray">
                                                </c:if>
                                            </div>
                                        </c:forEach>
                                    </c:if>
                                </div>
                            </div>

                        </c:forEach>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>

<script type="application/javascript">

    layui.use('layer', function () {
        window.layer = layui.layer;
    });
    /*导航栏参数*/
    var $nav_a = $("#ul_nav a[href='/role/create']");
    $nav_a.parent().addClass("active");
    $nav_a.parent().parent().css("display", "block");

    $(function () {
        /*修改checkbox 样式*/
        $("#divCheck :checkbox").each(function () {
            var title = $(this).attr("title");
            var funcType = $(this).attr("tag-index");
            var div = $("<div class=\"layui-unselect layui-form-checkbox\" func-type=" + funcType + " lay-skin=\"primary\">"
                + "<span>" + title + "</span><i class=\"layui-icon\"></i></div>");

            $(div).click(function () {
                var che = $(this).prev().prop("checked");
                $(this).prev().prop("checked", !che);
                if (!che) {
                    $(this).addClass("layui-form-checked");
                } else {
                    $(this).removeClass("layui-form-checked");
                }
            });
            $(this).after(div);
        });

        /*验证信息*/
        window.fault = false;
        $("#createRoleForm").validate({
            debug: true,
            onfocusout: false,
            onkeyup: false,
            onclick: false,
            submitHandler: function () {
                var formData = $('#createRoleForm').serializeObject();
                formData = JSON.stringify(formData);
                $.ajax({
                    url: '<c:url value="/role/save"/>',
                    dataType: 'json',
                    type: 'post',
                    data: formData,
                    contentType: "application/json",
                    error: function () {
                    },
                    success: function (data) {
                        if (data.code !== "200") {
                            window.layer.msg(data.message, {icon: 5, anim: 6});
                        } else {
                            window.location.href = '<c:url value="/role/list"/>';
                        }
                    }
                });
            },
            rules: {
                roleName: "required"
                , lock: "required"
            },
            messages: {
                roleName: "角色名不能为空"
                , lock: "请选择类型"
            },
            showErrors: function (errorMap, errorList) {
                window.fault = this.numberOfInvalids() > 0;
                this.defaultShowErrors();
            },
            errorPlacement: function (error, element) {
                if (window.fault) {
                    window.fault = false;
                    $(element).addClass("layui-form-danger").focus();
                    window.layer.msg($(error).text(), {icon: 5, anim: 6});
                }
            }
        });


        /*顶级checkbox*/
        $("div[func-type='1']").click(function () {
            var che = $(this).prev().prop("checked");
            var $subContainer = $(this).parent().next();
            var subs = $("div[func-type='2']", $subContainer);
            $.each(subs, function (key, value) {
                if (che) {
                    $(this).addClass("layui-form-checked");
                } else {
                    $(this).removeClass("layui-form-checked");
                }
                $(this).prev().prop("checked", che);
                var $finalContainer = $(this).parent().next();
                var subs = $("div[func-type='3']", $finalContainer);
                $.each(subs, function (key, value) {
                    if (che) {
                        $(this).addClass("layui-form-checked");
                    } else {
                        $(this).removeClass("layui-form-checked");
                    }
                    $(this).prev().prop("checked", che);
                })
            });
        });


        /*二级checkbox*/
        $("div[func-type='2']").click(function () {
            var che = $(this).prev().prop("checked");
            var $finalContainer = $(this).parent().next();
            var subs = $("div[func-type='3']", $finalContainer);
            $.each(subs, function (key, value) {
                if (che) {
                    $(this).addClass("layui-form-checked");
                } else {
                    $(this).removeClass("layui-form-checked");
                }
                $(this).prev().prop("checked", che);
            });
            var $subContailner = $(this).parent().parent().parent();
            var $subChecks = $(":checkbox[tag-index='2']", $subContailner);
            var check_result = false;
            $.each($subChecks, function (key, value) {
                if ($(value).prop("checked") == true) {
                    check_result = true;
                    return true;
                }
            });
            var $topContainer = $("div[func-type='1']", $($subContailner).prev());
            $.each($topContainer, function (key, value) {
                if (check_result) {
                    $(this).addClass("layui-form-checked");
                } else {
                    $(this).removeClass("layui-form-checked");
                }
                $(this).prev().prop("checked", check_result);
            });
        });


        /*三级checkbox*/
        $("div[func-type='3']").click(function () {
            var che = $(this).prev().prop("checked");
            var $finalContailner = $(this).parent().parent();
            var $subChecks = $(":checkbox[tag-index='3']", $finalContailner);
            var check_result = false;
            $.each($subChecks, function (key, value) {
                if ($(value).prop("checked") == true) {
                    check_result = true;
                    return true;
                }
            });
            var $subContainer = $("div[func-type='2']", $($finalContailner).prev());
            $.each($subContainer, function (key, value) {
                if (check_result) {
                    $(this).addClass("layui-form-checked");
                } else {
                    $(this).removeClass("layui-form-checked");
                }
                $(this).prev().prop("checked", check_result);
            });

            var $topContailner = $(this).parent().parent().parent().parent().parent();
            var checkeds = $(":checked", $topContailner);
            var type = checkeds.length > 1;
            var $checkContainer = $("div[func-type='1']", $topContailner);
            $.each($checkContainer, function (key, value) {
                if (type) {
                    $(this).addClass("layui-form-checked");
                } else {
                    $(this).removeClass("layui-form-checked");
                }
                $(this).prev().prop("checked", check_result);
            });

        });

        initFunctions(${role.id});
    });

    function initFunctions(roleId) {
        roleId = roleId || "";
        if (roleId == "") {
            return true;
        }
        $.ajax({
            url: '<c:url value="/function/queryByRole"/>',
            dataType: 'json',
            type: 'post',
            data: {roleId: roleId},
            error: function () {
            },
            success: function (data) {
                if (data.code !== "200") {
                    window.layer.msg(data.message, {icon: 5, anim: 6});
                } else {
                    $.each(data.data, function (i, o) {
                        $(":checkbox[value='" + o.id + "']").next().addClass("layui-form-checked");
                    });
                }
            }
        });
    }
</script>


</html>
